<template>
	<!--<el-dialog :title="title" :visible.sync="formVisible">-->
	<div id="img_detail" class="table" v-if="formVisible">
		<div class="container">
			<div style="text-align:center;">
				<div style="text-align:left;margin:0 auto;">
					<el-form :model="modelData" label-width="100px" class="demo-ruleForm" style="width:60%;">
						<el-form-item label="图片类别" v-if="modelData.id == 0 || modelData.id == null">
							<el-select v-model="modelData.bannerType" placeholder="图片类别" class="handle-select mr10">
								<el-option v-for="(value,key) in bannerTypes" :key="key" :label="value" :value="key"></el-option>
							</el-select>

						</el-form-item>
						<el-form-item label="图片类别" v-else>
							<el-select v-model="modelData.bannerType" placeholder="广告图分类">
								<el-option v-for="(value,key) in bannerTypes" :key="key" :label="value" :value="key">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="排序编号">
							<el-input-number v-model="modelData.seqNo" :min="1" :max="1000000"></el-input-number>
						</el-form-item>
						<el-form-item label="图片">
							<el-upload class="avatar-uploader" :action="globaldata.uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
								<img v-if="modelData.imgId" :src="modelData.imgUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<div class="headimg" v-if="select_type=='home_banner'">温馨提示：建议尺寸750*400</div>
							<div class="headimg" v-if="select_type=='inviting_silver'">温馨提示：建议尺寸80*80</div>
						</el-form-item>
						<el-form-item class="text_align" label="URL链接：">
							<el-input v-model="modelData.bannerUrl" :maxlength="100"></el-input>
						</el-form-item>
						<el-form-item class="text_align" label="描述：" v-if="modelData.bannerType !='inviting_silver'">
							<el-input v-model="modelData.bannerName" :maxlength="50"></el-input>
						</el-form-item>
						<el-form-item label="咨询标签：" v-else>
									<el-select v-model="modelData.bannerName" placeholder="请选择">
										<el-option v-for="(value,key) in careerTags" :key="key" :label="value" :value="key"></el-option>
									</el-select>
					    </el-form-item>
					</el-form>
				</div>
			</div>
			<div slot="footer" class="dialog-footer my_flex_right">
				<el-button @click="close()">返回</el-button>
				<el-button type="primary" @click="save()">保存</el-button>
			</div>
			<!--</el-dialog>-->
		</div>
	</div>
</template>
<script type="text/javascript">
	import service from '../../../../js/common/imgservice.js'
	export default {
		props: {
			id: null,
			parentDetailData: {},
			select_type: ''
		},
		data() {
			return {
				uploadData: {
					savepath: "\\Banner\\"
				},
				modelData: {},
				bannerTypes: [],
				careerTags:[],
				uplaodUrl: "",
				formVisible: this.visible
			}
		},
		watch: {
			formVisible(newVal, oldVal) {
				if(newVal) { //详情页弹出
					this.bannerTypes = this.$store.state.banner_picture;
					let self = this;
					let param_arr = ['career_tag'];
					this.tool.getDirByKey(this, param_arr).then(() => {
						self.careerTags = self.$store.state.career_tag;
					});
					this.resetData();
					service.getModelData(this);
				}
			},
		},
		methods: {
			show() {
				this.formVisible = true;
			},
			save() {
				service.handleSave(this);
			},
			close() {
				this.parentDetailData.isTabelShow = true;
				this.formVisible = false;
			},
			resetData() {debugger;
				this.modelData = {
					id: null,
					imgId: null,
					seqNo: 1,
					bannerType: this.select_type,
					imgUrl: '',
					bannerName: '',
					bannerUrl:''
				}
			},

			handleAvatarSuccess(res, file) {
				let data = res.data;
				if(res.code == 1) {
					this.modelData.imgId = data.id;
					this.modelData.imgUrl = this.globaldata.imgBaseUrl + data.id;
				} else {
					this.$message({
						message: res.msg,
						type: 'error'
					})
				}
			},
			beforeAvatarUpload(file) {
				return this.validatetool.validateImgSizeAndType(this, file,'', 2);
			}
		}
	}
</script>
</script><style lang="less">
	#img_detail{
		.headimg{
			color: red;
		}
	}	
</style>